<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../../js/hpFrame.js"></script>
    <style>
        .coursecontainer {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            height: 300px;
        }

        .courseitem {
            margin: 10px;
            width: calc(100%/4 - 20px);
            height: 302px;
        }

        .addcourse {
            cursor: pointer;
            background-color: #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: center
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="coursecontainer">
            <div class="courseitem" v-for="course in tableData">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>{{course.name}}</span>

                        <el-button type="primary" style="float: right; padding: 10px 5px;margin-left:5px"
                            @click="showCourseFile(course)">查看课件
                        </el-button>
                        <el-button type="primary" style="float: right; padding: 10px 5px" @click="handleDetail(course)">
                            查看
                        </el-button>
                    </div>
                    <div class="text item">
                        创建人：{{course.createByName}}
                    </div>
                    <div class="text item">
                        创建时间：{{course.createTime}}
                    </div>
                    <div class="text item">
                        课件简介：{{course.remark}}
                    </div>
                </el-card>
            </div>

            <!-- <div class="courseitem addcourse" onclick="addCourse()">
                <img style="width:100px;height: 100px;" src="../../img/addcourse.png">
            </div> -->
        </div>
    </div>
</body>
<script>
    var tableUrl = apiFrameUrl + "course/getCourseList";
    var deleteUrl = apiFrameUrl + "course/removeById";
    var pageData = {
        tableData: []
    };
    new Vue({
        el: '#app',
        data: pageData,
        methods: {
            showCourseFile: function (course) {
                OpenTopDialog('attachlist',
                    'page/attach/attachshow_list.html?groupguid=' + course.id, 500, 300, '课件查看',
                    bindGrid);
            },
            handleEdit: function (course) {
                OpenTopDialog('courseedit',
                    'page/course/course_edit.html?id=' + course.id, 800, 600, '编辑', bindGrid);
            },
            handleDetail: function (course) {
                OpenTopDialog('coursedetail',
                    'page/course/course_detail.html?id=' + course.id, 1256, 0, '查看', bindGrid);
            },
            handleDetel: function (course) {
                OpenConfirm('提示', '确认删除？', function () {
                    JsonAjax(JSON.stringify(course), deleteUrl, function (data, status) {
                        if (data.success) {
                            OpenSuccess('提示', '删除成功')
                            bindGrid();
                        }
                    })
                })
            }
        },
        mounted: function () {
            checkUserInfo();
            bindGrid();
        },
    })

    function addCourse() {
        OpenTopDialog('courseadd',
            'page/course/course_add.html', 800, 600, '新增', bindGrid);
    }

    function bindGrid() {
        var data = {
            "pageNo": 1,
            "pageSize": 5000,
        };
        JsonAjax(JSON.stringify(data), tableUrl, function (data, status) {
            if (data.success) {
                Vue.set(pageData, "tableData", data.result.records);
            }
        })
    }
</script>

</html>